<!--
 * @Description: 文件描述
 * @Author: 程前
 * @Date: 2024-12-02 11:41:10
 * @LastEditors: 程前
 * @LastEditTime: 2025-02-25 15:24:17
-->
<template>
  <div class="viewer-container" id="viewerContainer" />

  <!-- 功能面板 -->
  <IconCommon />

  <!-- 底部状态栏 -->
  <NavBar />

  <!-- 全局配置面板 -->
  <ConfigPanel />

  <!-- 全局顶部面板 -->
  <TopPanle />
</template>

<script setup lang="ts">
import IconCommon from '../common/iconCommon.vue';
import NavBar from '../navbar/Index.vue';
import ConfigPanel from '../configPanel/Index.vue';
import TopPanle from "../topPanel/Index.vue";
import { onMounted, ref, onUnmounted } from "vue";
import { Cartesian3, WebMercatorTilingScheme } from "cesium"
import { initCesium, setMouseLongPressIcon, createCustomImageryProvider, addTerrain } from "@/utils";
import { useCesiumGlobalStore } from "@/store/modules/cesiun-global"
import CesiumNavigation from 'cesium-navigation-es6';
const cesiumGlobalStore = useCesiumGlobalStore()
const mouseEvent = ref<Function>(null)
onMounted(async () => {
  try {
    cesiumGlobalStore.viewerInstance = initCesium('viewerContainer', {
      baseLayer: false,
      // baseLayerPicker: false
    })
    const Viewer = cesiumGlobalStore.viewerInstance

    // const waterSurface = new SimulatedOcean(Viewer, {
    //   positions: positions, // 水面边界坐标
    //   height: 50,          // 水面高度
    //   amplitude: 2.0,      // 波浪高度
    //   frequency: 1.0,      // 波浪频率
    //   animationSpeed: 0.3, // 动画速度
    //   choppiness: 1.5,    // 波浪尖锐度
    //   wind: new Cesium.Cartesian2(10.0, 10.0), // 风向和风速
    //   baseWaterColor: new Cesium.Color(0.004, 0.016, 0.047, 1.0), // 水面基础颜色
    //   blendColor: new Cesium.Color(3.2, 9.6, 12.8, 0.5)  // 混合颜色
    // });
    // addEarthWater(Viewer)`
    // const osmBuildings = await Cesium.createOsmBuildingsAsync();
    // cesiumGlobalStore.viewerInstance.scene.primitives.add(osmBuildings);

    // const options = {
    //   defaultResetView: Rectangle.fromDegrees(80, 22, 130, 50),
    //   enableCompass: true,
    //   enableZoomControls: true,
    //   enableDistanceLegend: false,
    //   enableCompassOuterRing: true
    // }
    // new CesiumNavigation(cesiumGlobalStore.viewerInstance, options);

    // const url = "/terrain"
    const url = "http://localhost:5174/assets/terrain/global"
    addTerrain(Viewer, url)

    // 高德图层
    // let ampOpts = {
    //   url: "http://localhost:5174/assets/basemap/china_tiles/{z}/{x}/{y}.png",
    //   crs: 'WGS84' // 使用84坐标系，默认为：GCJ02
    // }
    // const imageryProvider = createAMapImageryProvider(ampOpts)
    // Viewer.imageryLayers.addImageryProvider(imageryProvider)



    // 自定义图层
    let cmapOpts = {
      url: "http://localhost:5174/assets/map/tiles/{z}/{x}/{y}.png",
      tilingScheme: new WebMercatorTilingScheme(),
      minimumLevel: 0, // 最小层级
      maximumLevel: 13, // 最大层级
    }
    const imageryProvider = createCustomImageryProvider(cmapOpts)
    Viewer.imageryLayers.addImageryProvider(imageryProvider)
    const cursorConfig = {
      leftButton: {
        cursor: 'pointer',
        pressTime: 10
      },
      middleButton: {
        iconUrl: "images/common/refresh.png",
        pressTime: 10,
      }
    }
    mouseEvent.value = setMouseLongPressIcon(Viewer, cursorConfig)
    Viewer.camera.setView({
      destination: Cartesian3.fromDegrees(113.35, 26.62869524, 2000000),
      // destination: Cartesian3.fromDegrees(117.38513, 40.14836, 20000),
      // destination: Cartesian3.fromDegrees(119.53126, 37.32159, 100000),
    })
  } catch (error) {
    console.log(error, 'error');
  }
})

/**
 * 取消全局鼠标监控
 */
onUnmounted(() => {
  mouseEvent.value()
})

</script>

<style scoped lang="less">
.viewer-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ccc;
  color: rgb(4, 32, 59);
}
</style>
